<template>
	<view class="pages">
		<view class="search_warp">
			<view class="search u-flex-y-center u-flex-between">
				<view class="u-flex-y-center">
					<view class="search_img">
						<image :src="`${$http_cos}/static/search.png`"></image>
					</view>
					<input type="number" v-model="id" placeholder="输入编号" @blur="onSearch" @keyup.enter.native="$event.target.blur()"/>
				</view>
				<view class="search_btn" @keyup.enter.native="onSearch">
					<text>搜索</text>
				</view>
			</view>
			<u-tabs :list="tab_list" @click="click" :current="current" :itemStyle="{height:'92rpx',fontSize:'28rpx'}" lineColor="#FF7612" lineWidth="40" lineHeight="6" :activeStyle="{color:'#FF7612'}"></u-tabs>
		</view>
		<view class="list">
			<view class="item " v-for="(item,index) in proData" :key="index" @click="skip(item)">
				<view class="u-flex-between u-flex item_top" >
					<text>申请时间:{{item.createdAt}}</text>
					<text :style="{color:(item.cost=='未收恋爱基金'||item.cost=='未退恋爱基金')?'#FF7612':'#000000'}">{{item.cost}}</text>
					<!-- <text v-if="item.status==6">{{item.userIdMatchCost}}</text> -->
				</view>
				<view class="u-flex-xy-center item_botton">
					<view class="u-flex-column item_botton_text">
						<text>申请人</text>
						<text>ID:{{item.userId}}@{{item.userIdMatchUid}}</text>
					</view>
					<image :src="`${$http_cos}/static/%E4%BA%92%E7%9B%B8%E7%AE%AD%E5%A4%B4.png`" class="arrows"></image>
					<view class="u-flex-column  item_botton_text">
						<text>要询问的人</text>
						<text>ID:{{item.inquiryUserId}}@{{item.inquiryUserIdMatchUid}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty
		v-if="proData.length==0"
		textSize='30'
		        mode="data"
				width="200"
				height="200"
				icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png"
		>
		</u-empty>
	</view>
</template>

<script>
	import {loveList} from '@/common/api.js'
	const app = getApp()
	export default {
		data() {
			return {
				current:0,
				id:'',
				tab_list:[{name:'恋爱中',status:5},{name:'分手了',status:6}],
				$http_cos: app.$http_cos,
				collapselist: [{
					title: '@2',

				}, {
					title: '单身'
				}, {
					title: '糖果会员'
				}],
				proData:[],
				page:1,
				count:0,
				perPage:10,
				num_id:0,
			}
		},
		watch:{
				id(val){
					this.num_id=val
				}
		},
		onLoad() {
			this.love_List()
		},
		onReachBottom() {
			
			this.love_List()
		},
		methods: {
			skip(item){
				uni.navigateTo({
					url:'/pages/ask_details/index?id='+item.id+'&title=回访'
				})
			},
			onSearch(){
				this.init()
			},
			click(e){
				if(e.index==this.current)return;
				this.current=e.index
				this.init()
			},
			init(){
				this.page=1
				this.proData=[]
				this.count=0
				setTimeout(()=>{
					this.love_List()	
				},200)
			},
			love_List(){
				let data = {
					params:{
						id:this.num_id,
						page: this.page,
						perPage:this.perPage,
						status:this.tab_list[this.current].status
					}
				}
				loveList(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.proData = [...this.proData, ...result.list]
					this.count=result.count
					// result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
					this.page++;
				}).catch((err) => {
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {

		.search_warp {
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			height: 176rpx;
			/deep/ .u-tabs__wrapper__nav__item{
				flex: 1;
				padding:0;
				&__text{
					font-size:28rpx;
				}
			}
			.search {
				position: relative;
				height: 72rpx;
				width: 100%;
				background:#F9F9F9;
				border-radius: 36rpx;
				padding: 0 30rpx 0 32rpx;
				box-sizing: border-box;
			
				.search_img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				input {
					font-size: 28rpx;
					color: #C9C9C9;
				}

				.search_btn {
					padding: 0 24rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 2rpx;
						height: 100%;
						background: #E5E5E5;
						-webkit-transform: scaleX(.5);
						transform: scaleX(.5);
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #111111;
					}
				}
			}
		}

		.collapse {
			margin-top: 10rpx;

			.collapse_item {
				padding: 12rpx;
				box-sizing: border-box;

				text {
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-icon {
					width: 20rpx;
					height: 12rpx;
					margin-left: 27rpx;
				}
			}
		}

		.list {
			padding: 20rpx;
			box-sizing: border-box;

			.item {

				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 16rpx;

				.item_top {
					position: relative;
					height: 73rpx;
					padding: 0 29rpx 0 27rpx;
					box-sizing: border-box;
					align-items: center;
					text{
						&:first-child{
							font-size: 26rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #929292;
						}
						&:last-child{
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							// color: #FF7612;
						}
					}
					&:after {
						content:'';
						left: 0;
						bottom: 0;
						width: 100%;
						height:2rpx ;
						position: absolute;
						background: #E5E5E5;
						-webkit-transform: scaleY(.5);
						transform: scaleY(.5);

					}
				}
				.item_botton{
					height:130rpx;
					
					.item_botton_text{
						text{
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #111111;
						}
						align-items: center;
					}
					.arrows {
						width: 74rpx;
						height: 44rpx;
						padding: 0 90rpx 0 79rpx;
					}
				}
				
			}
		}


	}
</style>
